<script lang="ts" setup>
import router from '@/router';
import { onMounted, ref, watch } from 'vue';
import { verifyBase64, verifyEmail, verifyPhone } from '@/utils/validate';
import { getUserMeta, updateUserImage, updateUserMeta } from "@/api/PersonalSpace/PersonalInfo";
import { message } from 'ant-design-vue';
// 定义信息的数据类型
interface UserInfo {
  nickName: string; // 用户昵称
  sex: string; // 性别
  userIntroduction: string; // 个人简介

  userImage: string; // 用户头像
  userCover: string; // 用户封面

  realName: string; // 真实姓名
  school: string; // 所在学校
  college: string; // 所属学院
  major: string; // 所在专业
  studentId: string; // 学号
  phoneNumber: string; // 手机号
  email: string; // 邮箱
  participationType: string; // 参与方式
  campus: string; // 所属校区
  studentStatus: string; // 在校生身份
  enrollmentYear: string; // 入学年份
  projectStatus: string; // 项目参与情况
  projectType: string; // 项目类型
  projectName: string; // 项目名称
}

// 初始化用户信息
const userInfo = ref<UserInfo>({
  // 头像和封面
  userImage: 'https://via.placeholder.com/150',
  userCover: 'https://via.placeholder.com/600x200',
  // 基本信息
  nickName: '',
  sex: '男',
  userIntroduction: '',
  // 认证信息
  realName: '',
  school: '',
  college: '',
  major: '',
  studentId: '',
  phoneNumber: '',
  email: '',
  participationType: '线上',
  campus: '',
  studentStatus: '',
  enrollmentYear: '',
  projectStatus: '',
  projectType: '',
  projectName: '',
});

// 基本信息
const basicInfoFields: { label: string; model: keyof UserInfo; type: string; options?: string[] }[] = [
  { label: '用户昵称', model: 'nickName', type: 'input' },
  { label: '性别', model: 'sex', type: 'select' },
  { label: '个人简介', model: 'userIntroduction', type: 'input' },
];

// 认证信息
const authInfoFields: { label: string; model: keyof UserInfo; type: string; options?: string[] }[] = [
  { label: '真实姓名', model: 'realName', type: 'input' },
  { label: '所在学校(全称,无需校区)', model: 'school', type: 'input' },
  { label: '所属学院(全称)', model: 'college', type: 'input' },
  { label: '所在专业(全称)', model: 'major', type: 'input' },
  { label: '学号', model: 'studentId', type: 'input' },
  { label: '手机号', model: 'phoneNumber', type: 'input' },
  { label: '邮箱', model: 'email', type: 'input' },
  { label: '参与方式', model: 'participationType', type: 'select' },
  { label: '所属校区(训练营上课校区)', model: 'campus', type: 'select' },
  { label: '学生身份', model: 'studentStatus', type: 'select' },
  { label: '入学年份', model: 'enrollmentYear', type: 'select' },
  { label: '参加项目情况', model: 'projectStatus', type: 'select' },
  { label: '参加项目类型', model: 'projectType', type: 'select' },
  { label: '立项项目名称', model: 'projectName', type: 'input' },
];

// 重载信息显示部分
const componentKey = ref(0)
const reloadComponent = () => {
  componentKey.value++; // 修改组件的 key 值，触发重新渲染
};

// 将数据传值给userInfo
const loadUserInfo = (data: Partial<UserInfo>) => {
  Object.keys(data).forEach((key) => {
    // 检查 data 中的值是否为有效值（非 undefined、null 和 空字符串）
    if (data[key as keyof UserInfo] !== null) {
      // 更新 userInfo 中对应字段的值
      (userInfo.value[key as keyof UserInfo] as any) = data[key as keyof UserInfo];
    }
  });
};

// 获取用户信息函数
const fetchUserMeta = async () => {
  try {
    const data = await getUserMeta();
    loadUserInfo(data);
    reloadComponent();
  }
  catch (error) {
    console.error("userinfo.vue获取用户信息失败: ", error);
  }
};

// 将 Base64 字符串转换为 File 对象的函数
const base64ToFile = (base64String: string, fileName: string): File => {
  // 检查 Base64 字符串格式是否正确，并去除前缀部分，如 "data:image/png;base64,"
  // console.log(base64String);
  const arr = base64String.split(',');
  if (arr.length < 2)
    throw new Error("Invalid base64 string");
  // 使用正则表达式提取 MIME 类型，并进行空值校验
  const mimeMatch = arr[0].match(/:(.*?);/);
  if (!mimeMatch || mimeMatch.length < 2)
    throw new Error("Invalid MIME type in base64 string");
  const mime = mimeMatch[1]; // 获取 MIME 类型
  const bstr = atob(arr[1]); // 解码 Base64 编码的字符串
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  // 将解码后的字符串逐字符转换为二进制数据存入 Uint8Array
  while (n--)
    u8arr[n] = bstr.charCodeAt(n);
  // 将 Uint8Array 转换为 File 对象
  return new File([u8arr], fileName, { type: mime });
};

// 提交用户信息到后端的函数
const submitUserInfo = async () => {
  try {
    // 调用更新用户信息的接口，并传递 userInfo 中的数据
    await updateUserMeta({
      nickName: userInfo.value.nickName,
      sex: userInfo.value.sex,
      userIntroduction: userInfo.value.userIntroduction,
      realName: userInfo.value.realName,
      school: userInfo.value.school,
      college: userInfo.value.college,
      major: userInfo.value.major,
      studentId: userInfo.value.studentId,
      phoneNumber: userInfo.value.phoneNumber,
      email: userInfo.value.email,
      participationType: userInfo.value.participationType,
      campus: userInfo.value.campus,
      studentStatus: userInfo.value.studentStatus,
      enrollmentYear: userInfo.value.enrollmentYear,
      projectStatus: userInfo.value.projectStatus,
      projectType: userInfo.value.projectType,
      projectName: userInfo.value.projectName,
    });
    // 创建要上传的图片对象
    const uploadData = {
      userImage: verifyBase64(userInfo.value.userImage) ? base64ToFile(userInfo.value.userImage, "userImage.png") : null,
      userCover: verifyBase64(userInfo.value.userCover) ? base64ToFile(userInfo.value.userCover, "userCover.png") : null,
    };
    // 过滤掉为 null 的字段
    const filteredData = Object.fromEntries(
      Object.entries(uploadData).filter(([, value]) => value !== null),
    );
    // 如果存在需要上传的文件则调用 updateUserImage
    if (Object.keys(filteredData).length > 0)
      await updateUserImage(filteredData);
    fetchUserMeta(); // 更新成功后重新获取用户信息
  }
  catch (error) {
    console.error("userinfo.vue 提交用户信息失败：", error);
  }
};

// 在组件挂载时调用接口获取数据
onMounted(() => {
  fetchUserMeta();
});

// 编辑状态
const isEditing = ref<boolean>(false);
// 是否保存
const isSave = ref<boolean>(false);
// 存储原始用户信息
const originalUserInfo = ref<UserInfo>({ ...userInfo.value });
// 进入编辑模式
const edit = () => {
  isEditing.value = true;
  isSave.value = false;
  Object.assign(originalUserInfo.value, userInfo.value); // 保存当前的用户信息
};

// 取消编辑，恢复到原始值
const cancel = () => {
  isEditing.value = false;
  isSave.value = false;
  Object.assign(userInfo.value, originalUserInfo.value); // 恢复原始值
};

// 保存修改
const save = async () => {
  isEditing.value = false;
  isSave.value = true;

  // 提交内容非空检查
  for (const key in userInfo.value) {
    const element: any = userInfo.value[key as keyof typeof userInfo.value];
    if (key === 'userIntroduction' || key === 'userImage' || key === 'userCover')
      continue;
    if (key === 'campus' && userInfo.value.participationType === '线上')
      continue;
    if ((key === 'projectType' || key === 'projectName') && userInfo.value.projectStatus === '仅参加训练营学习')
      continue;
    if (element == null || element === '') {
      message.error(`保存用户信息失败：${key} 不能为空`);
      cancel();
      return;
    }
  }
  message.success('保存用户信息成功');
  // 提交给后端
  submitUserInfo();
};
// 退出操作
const exit = () => {
  // 跳转到首页
  router.push('/user/homepagesquare')
};

// 图片上传之前的检查
const beforeUpload = (file: File) => {
  const isImage = file.type.startsWith('image/');
  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isImage)
    message.error('只能上传图片文件!');

  if (!isLt10M)
    message.error('图片必须小于 10MB!');

  return isImage && isLt10M;
};

// 图片更改处理
const handleFileChange = (info: any, type: 'avatar' | 'cover') => {
  if (info.file.status === 'done' || info.file.status === 'uploading') {
    const reader = new FileReader();
    reader.onload = () => {
      if (type === 'avatar')
        userInfo.value.userImage = reader.result as string;
      else if (type === 'cover')
        userInfo.value.userCover = reader.result as string;
    };
    reader.readAsDataURL(info.file.originFileObj);
  }
};
// 取消组件自动调用action，从而出现的404错误
const handleCustomRequest = ({ onSuccess }: any) => {
  // 模拟上传成功的回调，实际上什么也不做
  setTimeout(() => {
    onSuccess("ok"); // 模拟成功回调
  }, 1000);
};

// 判断该字段是否显示
const checkDisplay = (field: { model: string; type: string }) => {
  if (field.model === 'campus' && userInfo.value.participationType !== '线下')
    return false;
  if ((field.model === 'projectType' || field.model === 'projectName')
   && userInfo.value.projectStatus === '仅参加训练营学习')
    return false;
  // 其余的显示
  return true;
};

// 定义 blur 事件处理函数，根据字段类型判断输入是否合法
const checkValidate = (model: keyof UserInfo) => {
  // 当特定字段（如 phone）失去焦点时判断
  if (model === 'phoneNumber') {
    if (!verifyPhone(userInfo.value.phoneNumber)) {
      // 手机号码不合法时恢复为 props 中的初始值，并显示错误提示
      if (userInfo.value.phoneNumber !== '')
        message.error('手机号码格式不正确，请重新输入');
      userInfo.value.phoneNumber = originalUserInfo.value.phoneNumber || ''; // 恢复为初始值
    }
  }
  if (model === 'email') {
    if (!verifyEmail(userInfo.value.email)) {
      if (userInfo.value.email !== '')
        message.error('邮箱格式不正确，请重新输入');
      userInfo.value.email = originalUserInfo.value.email || ''; // 恢复为初始值
    }
  }
};

// 选项设置
// 参与方式的选项
const participationOptions = ref<string[]>(['线上']);
watch(
  () => userInfo.value.school,
  (newSchool: string) => {
    if (newSchool === '北京邮电大学') {
      participationOptions.value = ['线上', '线下']; // 如果学校是北京邮电大学，提供线上和线下两种选择
    }
    else {
      participationOptions.value = ['线上']; // 其他学校仅提供线上参与方式
      userInfo.value.participationType = '线上'; // 重置参与方式为线上
    }
  },
  { immediate: true },
);
// 性别
const sexOptions = ref(['男', '女']);
// 所属校区
const campusOptions = ref<string[]>(['北京邮电大学西土城校区', '北京邮电大学沙河校区', '北京邮电大学海南校区']);
// 在校生身份
const studentStatusOptions = ref<string[]>(['初中生', '高中生', '本科生', '硕士研究生', '博士研究生', '其他身份']);
// 项目参加情况
const projectStatusOptions = ref(['已组队参加', '计划报名', '仅参加训练营学习']);
// 项目参与类型
const projectTypeOptions = ref(['北京邮电大学雏燕计划', '北京邮电大学大创项目', '校际合作计划']);
// 定义一个返回最近八年的函数
const getRecentYears = (): string[] => {
  const currentYear = new Date().getFullYear();
  const recentYears: string[] = []; // 创建一个存储字符串的普通数组

  for (let i = 0; i < 8; i++)
    recentYears.push((currentYear - i).toString()); // 将最近 8 年的年份字符串推入数组中
  return recentYears; // 返回数组
}
// 返回对应的选项列表
const selectOptions = (model: string) => {
  switch (model) {
    case 'sex':
      return sexOptions.value;
    case 'participationType':
      return participationOptions.value;
    case 'campus':
      return campusOptions.value;
    case 'studentStatus':
      return studentStatusOptions.value;
    case 'enrollmentYear':
      return getRecentYears();
    case 'projectStatus':
      return projectStatusOptions.value;
    case 'projectType':
      return projectTypeOptions.value;
    default:
      return [];
  }
};
const buttons = [
  {
    label: '更改头像',
    type: 'primary',
    class: 'upload-button',
    showCondition: () => isEditing.value,
  },
  {
    label: '更改封面',
    type: 'primary',
    class: 'upload-button',
    showCondition: () => isEditing.value,
  },
  {
    label: '编辑',
    type: 'primary',
    class: 'edit-button',
    showCondition: () => !isEditing.value,
    onClick: () => edit(),
  },
  {
    label: '退出',
    type: 'primary',
    class: 'exit-button',
    showCondition: () => !isEditing.value,
    onClick: () => exit(),
  },
  {
    label: '保存',
    type: 'primary',
    class: 'save-button',
    showCondition: () => isEditing.value,
    onClick: () => save(),
  },
  {
    label: '取消',
    type: 'primary',
    class: 'cancel-button',
    showCondition: () => isEditing.value,
    onClick: () => cancel(),
  },
];
</script>

<template>
  <div style="height: 5%;" />
  <!-- 外层使用 a-layout 进行布局 -->
  <a-layout class="profile-container">
    <!-- 添加标题部分和内容的整体布局 -->
    <a-layout-content>
      <div class="profile-fields">
        <!-- 头像和封面区域 -->
        <h2 class="title">
          头像和封面
        </h2>
        <!-- 使用 a-flex 进行弹性布局 -->
        <a-flex justify="center" align="middle" class="avatar-cover-flex">
          <a-layout>
            <a-layout-content>
              <!-- 内部使用 a-flex 和 a-row 进行弹性布局和网格布局 -->
              <a-row justify="center" class="upload-section">
                <!-- 头像上传区域 -->
                <a-col>
                  <a-flex direction="column" align="center" justify="center" class="avatar-section">
                    <a-avatar
                      :src="userInfo.userImage"
                      size="large"
                      icon="user"
                      class="avatar-image"
                    />
                    <!-- 头像上传按钮 -->
                    <a-upload
                      :show-upload-list="false"
                      :before-upload="beforeUpload"
                      :custom-request="handleCustomRequest"
                      @change="(info: any) => handleFileChange(info, 'avatar')"
                    >
                      <a-button
                        v-for="(button, index) in buttons.filter(btn => btn.label === '更改头像')"
                        v-show="button.showCondition()"
                        :key="index"
                        :type="button.type"
                        :class="button.class"
                      >
                        {{ button.label }}
                      </a-button>
                    </a-upload>
                  </a-flex>
                </a-col>

                <!-- 封面上传区域 -->
                <a-col>
                  <a-flex direction="column" align="center" justify="center" class="cover-section">
                    <img
                      :src="userInfo.userCover"
                      class="cover-image"
                      alt="封面"
                    >
                    <!-- 封面上传按钮 -->
                    <a-upload
                      :show-upload-list="false"
                      :before-upload="beforeUpload"
                      :custom-request="handleCustomRequest"
                      @change="(info: any) => handleFileChange(info, 'cover')"
                    >
                      <a-button
                        v-for="(button, index) in buttons.filter(btn => btn.label === '更改封面')"
                        v-show="button.showCondition()"
                        :key="index"
                        :type="button.type"
                        :class="button.class"
                      >
                        {{ button.label }}
                      </a-button>
                    </a-upload>
                  </a-flex>
                </a-col>
              </a-row>
            </a-layout-content>
          </a-layout>
        </a-flex>

        <!-- 基本信息区域 -->
        <h2 class="title">
          基本信息
        </h2>
        <a-flex justify="center" align="middle" class="basic-info-flex">
          <a-layout>
            <!-- 使用 a-flex 布局包裹所有字段项，并设置方向为 column -->
            <a-layout-content>
              <a-flex direction="column" justify="start" align="stretch" class="fields-wrapper">
                <div
                  v-for="(field, fieldIndex) in basicInfoFields"
                  :key="fieldIndex"
                  class="field"
                >
                  <label>{{ field.label }}</label>
                  <!-- input类型 -->
                  <a-input
                    v-if="field.type === 'input'"
                    v-model:value="userInfo[field.model as keyof UserInfo]"
                    :readonly="!isEditing"
                    class="input-field"
                    :placeholder="`请输入您的${field.label}`"
                  />
                  <!-- select类型 -->
                  <a-select
                    v-if="field.type === 'select'"
                    v-model:value="userInfo[field.model as keyof UserInfo]"
                    :disabled="!isEditing"
                    class="select-field"
                    :placeholder="`请选择您的${field.label}`"
                  >
                    <!-- 动态获取选项列表 -->
                    <a-select-option v-for="option in selectOptions(field.model)" :key="option" :value="option">
                      {{ option }}
                    </a-select-option>
                  </a-select>
                </div>
              </a-flex>
            </a-layout-content>
          </a-layout>
        </a-flex>

        <!-- 认证信息区域 -->
        <h2 class="title">
          认证信息
        </h2>
        <a-flex justify="center" align="middle" class="auth-info-flex">
          <a-layout>
            <!-- 使用 a-flex 布局包裹所有字段项，并设置方向为 column -->
            <a-layout-content>
              <a-flex direction="column" justify="start" align="stretch" class="fields-wrapper">
                <div
                  v-for="(field, fieldIndex) in authInfoFields"
                  v-show="checkDisplay(field)"
                  :key="fieldIndex"
                  class="field"
                >
                  <label>{{ field.label }}</label>
                  <!-- input类型 -->
                  <a-input
                    v-if="field.type === 'input'"
                    v-model:value="userInfo[field.model as keyof UserInfo]"
                    :readonly="!isEditing"
                    class="input-field"
                    :placeholder="`请输入您的${field.label}`"
                    @blur="checkValidate(field.model)"
                  />
                  <!-- select类型 -->
                  <a-select
                    v-if="field.type === 'select'"
                    v-model:value="userInfo[field.model as keyof UserInfo]"
                    :disabled="!isEditing"
                    class="select-field"
                    :placeholder="`请选择您的${field.label}`"
                  >
                    <!-- 动态获取选项列表 -->
                    <a-select-option v-for="option in selectOptions(field.model)" :key="option" :value="option">
                      {{ option }}
                    </a-select-option>
                  </a-select>
                </div>
              </a-flex>
            </a-layout-content>
          </a-layout>
        </a-flex>
        <a-flex justify="center" class="button-group">
          <!-- 使用 v-for 循环渲染按钮 -->
          <a-button
            v-for="(button, index) in buttons"
            v-show="button.showCondition() && button.class !== 'upload-button'"
            :key="index"
            :type="button.type"
            size="large"
            :class="button.class"
            @click="button.onClick"
          >
            {{ button.label }}
          </a-button>
        </a-flex>
        <div style="height: 5%;" />
      </div>
      <!-- 底部按钮区域，使用 a-layout-footer 进行布局 -->
    </a-layout-content>
  </a-layout>
</template>

<style scoped lang="scss">
/* 外层布局容器样式 */
.profile-container {
  width: 95%;
  margin: 20px auto; /* 设置容器的外边距 */
  padding: 20px; /* 增加内边距 */
  border: 5px solid #ddd;  /* 保持完整的四边边框 */
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow-y: auto; /* 父组件可以滚动 */
  position: relative; /* 相对定位 */
}

.profile-fields {
  width: 100%;
  height: 100%;
  overflow-y: auto; /* 垂直滚动，防止内容超出边框 */
  padding-right: 0px; /* 增加内边距，避免内容紧贴右侧边框 */
  box-sizing: border-box; /* 包含内边距和边框 */
}
/* 标题样式 */
.title {
  text-align: left;
  font-size: 1.5rem;
  margin: 2% 5%;
  padding: 0;
  font-weight: bold;
  color: #333;
}

/* 弹性布局样式 */
.avatar-cover-flex,
.basic-info-flex,
.auth-info-flex {
  margin: 2% 0;
  padding: 2%;
  border: none;
  border-radius: none;
  background: #fff;
  width: 100%;
  max-width: 100%; /* 防止内容超出容器 */
}

/* 底部按钮间距和其他样式 */
.button-group {
  gap: 10%;
}

/* 覆盖 Ant Design 按钮的样式 */
.save-button,
.edit-button {
  background-color: #2ecc71;
  color: #fff;
  border: none;
}

.cancel-button,
.exit-button {
  background-color: #e74c3c;
  color: #fff;
  border: none;
}

.upload-section {
  width: 100%;
  height: 100%;
  margin-top: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  background: #FFF;
}

/* 头像和封面的样式 */
.avatar-section,
.cover-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 10%; /* 固定高度，避免按钮出现时导致内容变化 */
  position: relative;
  //border: 1px solid #ddd; /* 增加边框用于区分区域 */
  border-radius: 8px;
  padding: 0;
  background: #FFF;
}
.avatar-section {
  width: 100%;
  //height: 150%;
}
.cover-section {
  width: 100%;
}

/* 图像样式 */
.avatar-image,
.cover-image {
  margin-bottom: 5%;
  object-fit: cover;
  border: 1px solid #ddd;
}

/* 头像图像样式 */
.avatar-image {
  width: 75px; /* 固定头像宽度 */
  height: 75px; /* 固定头像高度 */
  border-radius: 50%;
}

/* 封面图像样式 */
.cover-image {
  width: 300px;
  height: 100px;
  border-radius: 5%;
}
.upload-button {
  width:100%;
  //height: 2rem;
}

/* 单个字段容器样式 */
.field {
  display: flex;
  align-items: center;
  margin-bottom: 1%;
}

/* label 标签样式 */
label {
  width: 30%;
  font-size: 1rem;
  margin-left: 10%;
  font-weight: bold;
  margin-right: 5%;
  text-align: left;
}

/* 输入框和选择框的通用样式 */
.input-field,
.select-field {
  width: 60%; /* 使用相同的百分比，确保所有输入框长度一致 */
  height: 2.5rem;
  border: 1px solid #ccc;
  border-radius: 5%;
  font-size: 1rem;
  transition: border-color 0.3s ease, background-color 0.3s ease;
  outline: none;
  display: flex;
  align-items: center;
  background-color: #fff;
  box-sizing: border-box;
}

/* 输入框样式 */
.input-field {
  padding: 0 12px; /* 统一左右内边距，避免 padding 影响高度 */
}

/* 选择框样式 */
.select-field {
  padding: 0; /* 移除 padding，防止影响整体高度 */
  border: 1px solid transparent; /* 边框颜色设置为透明 */
}

/* 样式穿透：覆盖 Ant Design 的选择器样式 */
:deep(.select-field .ant-select-selector) {
  height: 2.5rem !important; /* 强制使用与 input 一致的高度 */
  padding: 1rem !important; /* 与 input 保持一致的内边距 */
  display: flex;
  align-items: center;
  transition: height 0.3s ease, background-color 0.3s ease; /* 增加背景颜色的过渡效果 */
  background-color: #fff; /* 默认背景颜色与输入框一致 */
  font-size: 1rem;
}

/* 禁用状态的文本颜色 */
:deep(.select-field.ant-select-disabled .ant-select-selection-item),
:deep(.select-field.ant-select-disabled .ant-select-selection-placeholder),
.input-field[readonly] {
  color: #333 !important; /* 禁用状态下的文本颜色设为深灰色，确保一致 */
}

/* 禁用状态样式（输入框和选择框） */
.input-field[readonly],
:deep(.select-field.ant-select-selector[disabled]),
:deep(.select-field.ant-select-disabled .ant-select-selector) {
  background-color: #f5f5f5 !important; /* 禁用状态背景颜色一致 */
  border: 1px solid #ddd; /* 禁用状态下的边框颜色一致 */
  cursor: not-allowed;
}

/* 占位符样式 */
.input-field::placeholder,
.select-field .ant-select-selection-placeholder {
  color: #bbb; /* 占位符颜色 */
}

/* 聚焦状态样式 */
.input-field:focus,
.select-field .ant-select-selector:focus {
  border-color: #3498db;
  box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

/* 内部弹性布局容器样式 */
.fields-wrapper {
  width: 100%;
  flex-direction: column; /* 强制内部使用垂直排列 */
  background-color: #ffffff;
  border: none; /* 移除边框 */
  box-shadow: none; /* 如果有阴影效果也需要移除 */
}
</style>
